<title>玩家列表 - {:getSettingOptionsCache('base.web_site_title') ?: '后台管理系统模板'}</title>
<!--表格插件css-->
<link rel="stylesheet" href="{:HTTP_STATIC_ADMIN_CDN_URL}js/bootstrap-table/bootstrap-table.min.css">
<link rel="stylesheet" type="text/css" href="{:HTTP_STATIC_ADMIN_CDN_URL}css/style.min.css">

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <header class="card-header">
                    <div class="card-title">玩家列表</div>
                </header>
                <div class="card-body">

                    <form id="searchForm" class="row row-cols-lg-auto g-3 align-items-center">
                        <div class="col-12 mb-1">
                            <div class="input-group">
                                <div class="input-group-prepend search-bar">
                                    <input type="hidden" name="uid_keyword_field" class="search-field" value="id">
                                    <button class="btn search-btn btn-default dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">玩家ID</button>
                                    <div class="dropdown-menu">
                                        <a class="dropdown-item" href="javascript:void(0)" data-field="id">玩家ID</a>
                                        <a class="dropdown-item" href="javascript:void(0)" data-field="username">玩家昵称</a>
                                    </div>
                                </div>
                                <input type="text" class="form-control" autocomplete="off" value="" id="uid_keyword_value" name="uid_keyword_value" placeholder="请输入关键词">
                            </div>
                        </div>
                        <div class="col-12 mb-1">
                            <button type="submit" class="btn btn-default me-1 sreach-all"><i class="mdi mdi-magnify"></i> 搜索</button>
                        </div>
                    </form>

                    <table id="table"></table>
                </div>
            </div>
        </div>
    </div>

        <div class="modal fade" id="changePassword" tabindex="-1" aria-labelledby="changePassWordTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered ">
                <div class="modal-content">
                    <div class="modal-header">
                        <h6 class="modal-title" id="changePassWordTitle">正在更改玩家'<span id="name" class='text-danger'></span>'的密码</h6>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form action="">
                            <input type="hidden" name="uid" id="uid" />
                            <div class="mb-3 row align-items-center">
                                <div class="col-md-3 text-end"><label class="col-form-label" for="password">新密码</label></div>
                                <div class="form-group col">
                                    <input type="password" maxlength="15" class="form-control" autocomplete="off"  id="password" name="password" value="" placeholder="请输入新密码" />
                                </div>
                            </div>
                            <div class="mb-3 row align-items-center">
                                <div class="col-md-3 text-end"><label class="col-form-label" for="rePassword">确认新密码</label></div>
                                <div class="form-group col">
                                    <input type="password" maxlength="15" class="form-control" autocomplete="off"  id="repassword" name="repassword" value="" placeholder="请再次输入新密码" />
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" id="submit" onclick="changePassword()">保存修改</button>
                    </div>
                </div>
            </div>
        </div>
</div>

<script type="text/javascript" src="{:HTTP_STATIC_ADMIN_CDN_URL}js/layer/src/layer.js"></script>
<!--加载插件-->
<script type="text/javascript" src="{:HTTP_STATIC_ADMIN_CDN_URL}js/lyear-loading.js"></script>
<!--表格插件js-->
<script src="{:HTTP_STATIC_ADMIN_CDN_URL}js/bootstrap-table/bootstrap-table.js"></script>
<script src="{:HTTP_STATIC_ADMIN_CDN_URL}js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<!--表单验证-->
<script type="text/javascript" src="{:HTTP_STATIC_ADMIN_CDN_URL}js/jquery-validate/jquery.validate.min.js"></script>
<script type="text/javascript" src="{:HTTP_STATIC_ADMIN_CDN_URL}js/jquery-validate/messages_zh.min.js"></script>


<script>
    /**
     * 修改密码
     */
    function changePassword(){
        //验证表单
        let password = document.querySelector('#password').value;
        let rePassword = document.querySelector('#repassword').value;
        if(!password){
            showErrorNotify('密码不能为空');
            return;
        }
        if(!rePassword){
            showErrorNotify('确认密码不能为空');
            return;
        }
        if(password !== rePassword){
            showErrorNotify('两次密码不一致');
            return;
        }
        let l = $('body').lyearloading({
            opacity: 0.2,
            spinnerSize: 'lg'
        });
        post("{:url('/admin/user/cpwd')}", $('#changePassword form').serialize()).success(res => {
            if(res.code === 200){
                setTimeout(function () {
                    l.destroy();
                    bootstrap.Modal.getInstance(document.querySelector('#changePassword')).hide();
                    $('.close-btn').click();
                    parent.refreshTable();
                }, 500);
            }else{
                l.destroy();
            }
        }).error();
    }
    let objHtml = [
        {
            'title': '修改密码',
            'a-class': 'change-btn',
            'icon': 'mdi-key',
            'attr': {
                'data-bs-toggle': 'modal',
                'data-bs-target': '#changePassword',
            },
            'event': (event, value, row, index) => {
                //获取form的dom，然后重置
                $('#changePassword form')[0].reset();
                $('#name').html(row.username);
                $('#changePassword #uid').val(row.id);
            }
        },
        // {
        //     'title': '编辑',
        //     'a-class': 'edit-btn',
        //     'icon': 'mdi-pencil',
        //     'event': (event, value, row, index) => {
        //         openPage({
        //             url: "{:url('edit')}",
        //             param: {
        //                 id: row.id
        //             }
        //         }, '编辑玩家信息');
        //     }
        // },
    ];
    const requestUrl = "{:url('/admin/user/list')}";
    const columns = [{
        field: 'id',
        title: 'ID-玩家',
        align: 'center',
        width: 10,
        // 宽度单位
        widthUnit: 'rem',
        formatter: (value, row, index, field) => {
            return row.id + '-' + row.username;
        },  // 自定义方法
    }, {
        field: 'score',
        title: '分数',
        align: 'center',
        width: 6,
        // 宽度单位
        widthUnit: 'rem',
    }, {
        field: 'login_num',
        title: '登录次数',
        align: 'center',
        width: 6,
        // 宽度单位
        widthUnit: 'rem',
    }, {
        field: 'last_login_time',
        title: '最后登录时间',
        width: 6,
        // 宽度单位
        widthUnit: 'rem',
        align: 'center',
        formatter: (value, row, index, field) => {
            return makeData(value);
        },  // 自定义方法
    },  {
        field: 'createtime',
        title: '创建时间',
        width: 6,
        // 宽度单位
        widthUnit: 'rem',
        align: 'center',
        formatter: (value, row, index, field) => {
            return makeData(value);
        },  // 自定义方法
    }, {
        field: 'operate',
        title: '操作',
        align: 'center',
        width: 6,
        // 宽度单位
        widthUnit: 'rem',
        formatter: btnGroup(objHtml),  // 自定义方法
        events: btnEvents(objHtml)
    }];


</script>
<script type="text/javascript" src="/static/admin/js/common/table.js"></script>
<script>
    $(function () {
        $('.sreach-all').click(function () {
            refreshTable();
        });

        $('#searchForm').submit(function(){
            event.preventDefault();
        });
    });

    //下拉框更新样式
    $('.exampleSelect').each(function() {
        var $this = $(this);
        $this.lyearSelect({
            width: $this.data('width') ? $this.data('width') : '', // width示例：75px、50%
            placeholder: $this.data('placeholder') ? $this.data('placeholder') : '请选择',
            search: $this.data('search') ? $this.data('search') : false,
        });
    });

    //下拉选择搜索项
    $('.search-bar .dropdown-menu a').click(function() {
        $(this).parents('.search-bar').find('.search-field').val(($(this).data('field') || ''));
        $(this).parents('.search-bar').find('.search-btn').html($(this).text());
    });
</script>